<template>
	<div class="dh_jmhy_member">

		<div class="d_j_m-ancestor">
			
			<el-form :inline="true" :model="formInline" class="demo-form-inline">
					
				<el-form-item label="查询信息">
					<el-input v-model="formInline.user" placeholder="请输入详细信息"></el-input>
				</el-form-item>
				
				<el-form-item label="查询项">
					<el-select v-model="formInline.region" placeholder="全部数据">
						<el-option v-for="(item,key) in optionlabel" :key="key" :label="item" :value="key"></el-option>
					</el-select>
				</el-form-item>
				
				<el-form-item>
					<el-button type="primary" @click="onSubmit">查询</el-button>
				</el-form-item>
				
			</el-form>

			<div class="d_j_m-an-flex">

				<!-- 列表的类名 -->
				<div class="d_j_mber-list">
					
					<div class="d_j_m-list-title">
						<div>ID</div>
						<div>名称</div>
						<div>手机号</div>
						<div>入单时间</div>
						<div>入单金额</div>
						<div>计划总返利</div>
						<div>剩余总返利</div>
						<div>累计返利</div>
						<div>银行名称</div>
						<div>银行账号</div>
						<div>银行姓名</div>
					</div>
					<!-- 列表数据 -->
					<div class="d_j_m-list-details" v-for="(item,key) in memberdata" :key="key" v-if="item.real_name != null">
						<div>{{item.id}}</div>
						<div>{{item.real_name}}</div>
						<div>{{item.phone}}</div>
						<div>{{item.jointime*1000 | formatDate}} {{item.jointime*1000 | formatDateBehind}}</div>
						<div>{{item.pre_deposit}}</div>
						<div>{{item.pre_deposit*2}}</div>
						<div>{{item.pre_deposit*2 - item.settled}}</div>
						<!-- <div>{{(item.money*2 ) - (parseInt((today-item.time)/86400)*((item.money*2)*0.02))}}</div> -->
						<div>{{item.settled}}</div>
						<!-- <div>{{parseInt((today-item.time)/86400)*((item.money*2)*0.02)}}</div> -->
						<!-- <div>{{item.end}}</div> -->
						<div>{{item.bank_name}}</div>
						<div>{{item.bank_num}}</div>
						<div>{{item.bank_username}}</div>
					</div>
					
				</div>
		
			</div>

		</div>
		
	</div>
</template>

<script>
	import {date} from '../js/time.js';  			 //用于时间戳转换时间
	import {timetamp} from '../js/time.js'		 //用户日期转时间戳
	import {formatDate} from '../js/time.js';		 //直接在标签中转化时间的方法
	export default{
		data(){
			return{
				login:'',							//缓存中的保存的账号密码	
				today:'',							//当天时间
				memberdata:[],						//列表数据渲染
				formInline: {
					user: '',
					region: ''
				},
				optionlabel:['会员号','姓名','手机号',]
			}
		},
		//过滤器
		filters: {
		    formatDate(time) {							 //日期(年月日)
		        var date = new Date(time);
		        return formatDate(date, 'yyyy-MM-dd');   //年月日 格式自己定义   'yyyy : MM : dd'  例 2018年12月5日的格式
		    },
		    formatDateBehind(time) {					 //时间(时分秒)
		        var date = new Date(time);
		        return formatDate(date, 'hh:mm:ss');     //时间点 例 21点12分12秒的格式
		    }
		},
		methods:{
			onSubmit() {
				console.log('submit!');
			},
			//获取今天日期并转化时间戳的函数
			timedate(){
				let that =this
				let y = new Date().getFullYear();    //获取完整的年份(4位,1970-????)
				let m = new Date().getMonth() +1;    //获取当前月份(0-11,0代表1月)
				let d = new Date().getDate();        //获取当前日(1-31)
				m < 10 ? m = "0" + m : m
				d < 10 ? d = "0" + d : d
				let today = y+"-"+m+"-"+d
				that.today = timetamp(today)
				// console.log("今天"+that.today)
			},
			//数据请求，写成方法在生命周期中调用，看书去不会那么乱
			memberrequest(){
				let that = this
				const axios = require("axios")
				that.login = JSON.parse(sessionStorage.getItem("dh_jmhylogin"))
				let data = {name:that.login.uname,password:that.login.pwd}
				let updata = data
				axios({
					method: 'post',
					url: '/api/api/dh_jm/business_userinfo.php',
					header: {"Content-type": "appliction/JSON"},
					data: updata
				})
				.then(resp=>{
					// console.log(resp)
					that.memberdata = resp.data.data
				})
				.catch(err=>{
					console.log(err)
				})
			}
		},
		mounted(){
			let that = this
			that.timedate()
			that.memberrequest()
		}
	}
</script>

<style>
	.dh_jmhy_member{
		width: 100%;
		padding: 20px;
		box-sizing: border-box;
	}
	.d_j_m-ancestor{
		height: 100%;
	}
	.d_j_m-an-flex{
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		height: calc(100% - 62px);
		box-sizing: border-box;
	}
	/* 列表的类名样式 */
	.d_j_mber-list{
		font-size: 14px;
		background-color: white;
		border: 1px solid #cecece;
		border-radius: 5px;
	}
	/* 列表每一项的标题 */
	.d_j_m-list-title{
		display: grid;
		 /*grid-template-columns: repeat(11, minmax(0, 1fr)); 这个老的排版，数据类太多重新排版*/
		/* grid-auto-rows: 50px; */
		grid-template-columns: 1fr 1fr 1.2fr 1.6fr 1fr 1fr 1fr 1fr 1.8fr 1.6fr 1fr;
		padding: 15px 0;
		background-color: #dddddd;
	}
	/* 列表数据样式 */
	.d_j_m-list-details{
		display: grid;
		padding: 15px 0;
		/* grid-template-columns: repeat(11, minmax(0, 1fr)); */
		grid-template-columns: 1fr 1fr 1.2fr 1.6fr 1fr 1fr 1fr 1fr 1.8fr 1.6fr 1fr;
	}
	.d_j_m-list-details>div{
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 0 5px;
		/* min-width: 100px; */
	}
	/* 银行卡号的纯数字的换行效果，可用用于纯英文每空格乱序换行 */
	.d_j_m-list-details>div:nth-child(10){
		word-break:break-all;
		word-wrap:break-word
	}
	.d_j_m-list-details:nth-child(odd){
		background-color: #e1e1e1;
	}
	/* 列表的每项的垂直居中 */
	/* .d_j_m-list-title>*::before,.d_j_m-list-details>*::before{
		display: inline-block;
		content: "";
		height: 100%;
		vertical-align: middle;
	} */
</style>
